| Vue进阶（三十）：element | 您所在的位置：网站首页 › vue form表单校验rules › Vue进阶（三十）：element |
Vue进阶（三十）：element
|
这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情 一、简单逻辑验证（直接应用 rules）实现思路 html中给el-form增加 :rules="rules"; html中在el-form-item 中增加属性 prop="名称"; js中直接在data中定义rules:{}; html部分 常用地址js部分 export default { data() { return { form: { fAdderss: '', }, // 校验规则 rules: { fAdderss: [ { required: true, //是否必填 message: '地址不能为空', //规则 trigger: 'blur' //何事件触发 }, //可以设置双重验证标准 { min: 3, max: 5, message: '长度在 3 到 5 个字符', } ] } } } } 二、自定义验证逻辑实现思路 html中给el-form增加 :rules="rules"; html中在el-form-item 中增加属性 prop="名称"; js中直接在data中在rules中的名称对应设置 validator: 验证器名称,; js中在data中 return之上书写验证器对应的js验证逻辑;html部分 js部分 export default { data() { // 此处自定义校验手机号码js逻辑 var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/ var validatePhone = (rule, value, callback) => { if (!value) { return callback(new Error('号码不能为空!!')) } setTimeout(() => { if (!phoneReg.test(value)) { callback(new Error('格式有误')) } else { callback() } }, 1000) } return { form: { phone: '', }, // 校验规则 rules: { // 校验手机号码，主要通过validator来指定验证器名称 phone: [{ required: true, validator: validatePhone, trigger: 'blur' }] }, } } }效果图如下
实现思路 html中给el-form增加 ref="form" :model="ruleForm"; html中给提交按钮增加点击事件 @click="submitForm('form')" 中对应form的ref="form";js中直接在methods中定义提交事件 submitForm(){} html部分 //form //表单项 ... //提交按钮 立即登录js部分 methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { //如果通过验证 to do... } else { console.log('error submit!!') return false } }) } 四、拓展阅读在对表单日期/时间选择器进行校验的时候，rules中需要增加type='date'，否则会提示类型错误。例如， rules: { endSendTimeStr : [ { type: 'date',required: true, message: this.$t('filter.noempty'), trigger: 'change' } ] } |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |